<template>
  <div ref="chartRef" style="background: #fff"></div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, Ref } from 'vue';
  import { useECharts } from '@/hooks/web/useECharts';
  import { basicProps } from './props';

  const props = defineProps({
    ...basicProps,
    list: {
      type: Array,
      default: () => [],
    },
    xyTitle: {
      type: Object,
      default: () => {},
    },
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  onMounted(async () => {
    let option = {
      title: {
        text: '收货地区TOP10',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
      },
      yAxis: {
        type: 'category',
        data: [],
      },
      series: [
        {
          type: 'bar',
          data: [],
        },
      ],
    };
    const tempList = props.list.value;
    await tempList.sort(function (a, b) {
      return a.receiveCount - b.receiveCount;
    });
    tempList.forEach((item) => {
      option.yAxis.data.push(item.receiveCity);
      option.series[0].data.push(item.receiveCount);
    });
    // console.log('option.series[0].data===============', option.series[0].data);
    // option.series[0].data.sort((a, b) => a - b);

    setOptions(option);
  });
</script>
